<template>
  <el-container style="height: 100vh;">
    <!-- 侧边栏 -->
    <el-aside width="200px" style="background: #304156;">
      <el-menu
        default-active="1"
        class="el-menu-vertical-demo"
        background-color="#304156"
        text-color="#fff"
        active-text-color="#ffd04b"
        router
      >
        <el-menu-item index="/drug/list">
          <el-icon><List /></el-icon>
          <span>规则列表</span>
        </el-menu-item>
        <el-menu-item index="/drug/add">
          <el-icon><Plus /></el-icon>
          <span>新增规则</span>
        </el-menu-item>
      </el-menu>
    </el-aside>

    <!-- 主内容区 -->
    <el-container>
      <el-header style="background: #f5f5f5; padding: 0 20px; line-height: 60px;">
        <div style="float: right;">药品规则管理系统</div>
      </el-header>
      <el-main>
        <router-view /> <!-- 路由视图（核心） -->
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup>
import { List, Plus } from '@element-plus/icons-vue'
</script>

<style scoped>
.el-header {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
</style>
